.donation-flairs-settings {
  .flair-select {
    width: 300px;
  }
}
/* Issues with old versions of stylelint and stylelint-config-recommended-less.
   Updating either is a breakign change, so ignore the issues in this file that 
   don't result in preventing compilation
*/

.flair {
  position: relative;
  display: inline-block;
  /*
    Using CSS variables allows us to modify the colors
    on the fly for hovering/visited links instead of having to
    overwrite styles for hover, visited, hover+visited
  */
  --text-color: #{$body-color};
  // & char must appear at beginning of selector, so can't do `&a` which compiles to .flaira instead of a.flair
  // Using at-root to escape nesting, then interpolating ampersand (#{&}) to end up with the correct structure
  @at-root a#{&} {
    --text-color: #{$link-color};
    &:hover {
      --text-color: #{$link-hover-color};
    }
    &:visited {
      --text-color: #{$link-visited-color};
      &:hover {
        --text-color: #{$link-visited-hover-color};
      }
    }
  }
  > span {
    display: inline-block;
  }

  /*
    Disable animations entirely if the prefers-reduced-motion
    accessibility feature is active
  */
  @media (prefers-reduced-motion) {
    &,
    &::after,
    &::before,
    & > span {
      animation: none !important;
      transition: none !important;
    }
  }

  /* 
    Glitchy shaking animation
    Requires passing the parent element a data-text attribute with the username
  */
  &.shake {
    &::before,
    &::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: shake-text-effect 3s infinite;
      color: $blue;
    }
  }
  @keyframes shake-text-effect {
    0% {
      opacity: 1;
      left: 0px;
      top: 0px;
    }
    3% {
      left: -2px;
      top: -2px;
    }
    5% {
      left: 2px;
      top: 0px;
    }
    7% {
      left: -1px;
      top: 2px;
    }
    9% {
      left: 1px;
      top: -1px;
    }
    10% {
      left: 0px;
      top: -2px;
      opacity: 1;
    }
    11%,
    100% {
      opacity: 0;
      left: 0px;
      top: 0px;
    }
  }

  /*
    Color sweeps, with LB blue and orange color or white
    Requires each letter separate in a span element
  */
  &.lb-colors-sweep,
  &.light-sweep {
    color: var(--text-color);
    > span {
      transform-origin: 50% 50% -0.3em;
      position: relative;
      animation-timing-function: ease-in;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      // delay each letter's animation by 0.1s compared to previous letter
      @for $value from 1 through 20 {
        &:nth-child(#{$value}) {
          animation-delay: $value * 0.1s;
        }
      }
    }
  }
  &.lb-colors-sweep > span {
    animation-name: lb-colors-sweep;
  }
  @keyframes lb-colors-sweep {
    0%,
    9%,
    100% {
      color: var(--text-color, inherit);
    }
    3% {
      color: $orange;
    }
    6% {
      color: $blue;
    }
  }

  &.light-sweep > span {
    animation-name: light-sweep;
  }
  @keyframes light-sweep {
    0%,
    9%,
    100% {
      color: var(--text-color, inherit);
    }
    3% {
      color: $gray-light;
    }
    6% {
      color: var(--text-color, inherit);
    }
  }

  /*
    Wavy animation with each letter jumping up a bit in succession
    Requires each letter separate in a span element
   */
  &.wave > span {
    position: relative;
    animation: wave 3s infinite;
    animation-timing-function: ease-in;
    // delay each letter's animation by 0.1s compared to previous letter
    @for $value from 1 through 20 {
      &:nth-child(#{$value}) {
        animation-delay: $value * 0.05s;
      }
    }
  }
  @keyframes wave {
    0%,
    6%,
    12%,
    100% {
      transform: translateY(0);
    }
    9% {
      transform: translateY(-3px);
    }
  }

  /*
    Each letter flips vertically or horizontally one after the other in a wave
    Requires each letter separate in a span element
   */
  &.flip-horizontal > span,
  &.flip-vertical > span,
  &.flip-3d > span {
    position: relative;
    animation-timing-function: ease-in;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transform-origin: center 40%;
    @for $value from 1 through 20 {
      &:nth-child(#{$value}) {
        animation-delay: $value * 0.1s;
      }
    }
  }
  &.flip-horizontal > span {
    animation-name: flip-horizontal;
  }
  &.flip-vertical > span {
    animation-name: flip-vertical;
  }
  &.flip-3d > span {
    animation-name: flip-3d;
    transform-origin: 50% 50% -0.3em;
  }

  @keyframes flip-horizontal {
    0%,
    12%,
    100% {
      transform: rotateY(0);
    }
    6% {
      transform: rotateY(360deg);
    }
  }
  @keyframes flip-vertical {
    0%,
    12%,
    100% {
      transform: rotateX(0);
    }
    6% {
      transform: rotateX(360deg);
    }
  }
  @keyframes flip-3d {
    0%,
    8%,
    100% {
      transform: rotateX(0);
    }
    4% {
      transform: rotateX(-90deg);
    }
    4.01% {
      transform: rotateX(90deg);
    }
  }

  /*
    3D text with support for visited and hover colors 
  */
  &.extruded {
    vertical-align: text-bottom;
    color: $body-bg;
    text-shadow: 0px 0px var(--text-color), -0.5px 0.5px var(--text-color),
      -1px 1px var(--text-color), -1.5px 1.5px var(--text-color),
      -2px 2px var(--text-color), -2.5px 2.5px var(--text-color),
      -3px 3px var(--text-color);
    // mostly transparent outline for increased legibility
    -webkit-text-stroke: 0.5px rgb(from var(--text-color) r g b / 0.2);
    &:visited {
      color: $body-bg;
    }
  }

  /*
    Animated underline in LB blue and orange colors swishes under the user name
   */

  &.underline {
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 1px;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right, $blue, $orange);
      transform-origin: bottom right;
      animation: underline 4s infinite;
    }
  }

  @keyframes underline {
    0% {
      transform: scaleX(0);
      transform-origin: bottom left;
    }
    10% {
      transform: scaleX(1);
      transform-origin: bottom left;
    }
    10.01% {
      transform: scaleX(1);
      transform-origin: bottom right;
    }
    20%,
    100% {
      transform: scaleX(0);
      transform-origin: bottom right;
    }
  }

  /*
    Tornado effect: letters are rotated on the X axis one after the other 
    Requires each letter separate in a span element
   */
  &.tornado > span {
    transform-origin: 50% 50% -6px;
    position: relative;
    animation: tornado 4s infinite;
    animation-timing-function: ease-in;
    @for $value from 1 through 20 {
      &:nth-child(#{$value}) {
        animation-delay: $value * 0.1s;
      }
    }
  }
  @keyframes tornado {
    0%,
    12%,
    100% {
      transform: rotateX(0);
    }
    6% {
      transform: rotateX(360deg);
    }
  }

  /*
    Highlights the user name like a highlighter on hover, complete with highlighter yellow
  */
  &.highlighter {
    z-index: 1;
    &::before {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: #fbf719;
      z-index: -1;
      transition: transform 0.3s ease;
      transform: scaleX(0) skewX(-10deg);
      transform-origin: bottom right;
    }
    &:hover::before {
      transform: scaleX(1) skewX(-10deg);
      transform-origin: bottom left;
    }
  }

  /*
    3D stereoscopic effect (like that with red/cyan glasses) on hover only
  */

  &.anaglyph {
    transition: text-shadow 0.3s;
    &:hover {
      text-shadow: 0.06em -1px $red, -0.06em 1px $cyan;
    }
  }

  /*
    The text appears sliced in two, with a drop shadow to sell the effect 
    Requires passing the parent element a data-text attribute with the username
  */
  &.sliced {
    color: transparent;
    &::before,
    &::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      right: 0;
    }
    &::before {
      clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 60%);
      color: var(--text-color);
    }
    &::after {
      clip-path: polygon(0% 65%, 100% 46%, 100% 100%, 0% 100%);
      color: transparent;
      background: -webkit-linear-gradient(
        178deg,
        $black 53%,
        var(--text-color) 65%
      );
      background: linear-gradient(178deg, $black 50%, var(--text-color) 65%);
      background-clip: text;
      -webkit-background-clip: text;
      // offset the text slightly
      transform: translateX(-0.1em);
    }
  }
}
